<template>
  <div class="device-container">
    <fm-nav-bar
      title="设备信息"
      :border="false"
      left-arrow
      @click-left="back"
    />
    <div class="device-box">
      <div class="box1">
        <fm-cell-group inset>
          <fm-cell
            title="系统版本"
            :value="device.version ? device.version : '暂无数据'"
            title-class="title"
            value-class="value"
          />
          <fm-cell
            title="平台"
            :value="device.platform ? device.platform : '暂无数据'"
            title-class="title"
            value-class="value"
          />
          <fm-cell
            title="机型"
            :value="device.model ? device.model : '暂无数据'"
            title-class="title"
            value-class="value"
          />
          <fm-cell
            :border="false"
            title="厂商"
            :value="device.manufacturer ? device.manufacturer : '暂无数据'"
            title-class="title"
            value-class="value"
          />
        </fm-cell-group>
      </div>
      <div class="box2">
        <fm-cell-group inset>
          <fm-cell
            title="设备标识"
            :value="device.uuid ? device.uuid : '暂无数据'"
            title-class="title"
            value-class="value"
          />
          <fm-cell
            title="是否为模拟器"
            :value="device.isVirtual ? '是' : '否'"
            title-class="title"
            value-class="value"
          />
          <fm-cell
            :border="false"
            title="设备序列号"
            :value="device.serial ? device.serial : '暂无数据'"
            title-class="title"
            value-class="value"
          />
        </fm-cell-group>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Device',
  data() {
    return {
      device: {
        uuid: '',
        version: '',
        platform: '',
        model: '',
        manufacturer: '',
        isVirtual: null,
        serial: '',
      },
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
  },
  mounted() {
    if (typeof yuanchu != 'undefined') {
      yuanchu?.device?.getInfo(
        (res) => {
          this.device = res
        },
        (err) => {
          console.log(JSON.stringify(err))
        }
      )
    }
  },
}
</script>
<style lang="less" scoped>
.device-container {
  height: 100%;
  background-color: #f2f3f5;
}
.device-box {
  margin: 24px 0px;
}
.box1 {
  margin-bottom: 24px;
}
.title {
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #15171a;
  line-height: 40px;
}

.value {
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #727478;
  line-height: 40px;
}
</style>
